<template>
    <div class="container">
        <el-button @click="fullScreen">全屏</el-button>
        <div class="welcome" ref="welcome">
            <div class="top">
                <div class="article">
                    <div class="article__user">
                        <div class="article__user--avatar">
                            <el-avatar size="large"
                                       src=""></el-avatar>
                        </div>
                        <div class="article__user--info">
                            <p class="user--info__nickname">
                                {{ 111 }}
                            </p>
                            <p class="user--info__position">web开发工程师</p>
                        </div>
                        <div class="article__user--setting">
                            <!-- 设置按钮 -->
                            <i class="iconfont icon-shezhi"
                               @click="jumpToMine"></i>
                        </div>
                    </div>
                    <div class="article__date">
                        <div class="calendar">
                            <div class="date-title">日历</div>
                            <el-calendar v-model="date"
                                         height="100%"> </el-calendar>
                        </div>
                    </div>
                </div>
                <div class="aside">
                    <div class="aside--message">
                        <div class="aside--message__left">
                            <div class="message--left__hello">早上好</div>
                            <div class="message--left__weather">
                                南京天气阴
                                <i class="iconfont icon-duoyun"></i>
                            </div>
                        </div>
                        <div class="aside--message__notify">通知公告</div>
                    </div>
                    <div class="aside--tarsk">
                        <div class="tarsk--general">
                            <h4>任务概况</h4>
                            <div class="echartsGeneral"
                                 ref="echartsGeneral"></div>
                        </div>
                        <div class="tarsk--fact">
                            <h4>本月工作进度完成情况</h4>
                            <ul class="tarsk--detail__list">
                                <li v-for="(item, index) in workDataDetail"
                                    :key="item.name + index">
                                    <p>{{ item.value }}</p>
                                    <p>{{ item.name }}</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 阶段学习情况 -->
            <div class="bottom--achieve">
                <div class="bottom--achieve__left">
                    <div class="achieveCharts"
                         ref="achieveCharts"></div>
                </div>
                <!-- 期望课程 -->
                <div class="bottom--achieve__right">
                    <div class="expectCharts"
                         ref="expectCharts"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import { taskDataApi, lineDataApi, expectDataApi } from "@/api/chat";
//1.引入ecahrts
import * as echarts from "echarts";
//2.初始化echarts
//需要一个dom容器
//需要一个配置项option
//特别注意!!!!:容器一定要有高度
export default {

    data() {
        return {
            date: new Date(),
            workDataDetail: [],
        };
    },
    computed: {

    },
    methods: {
        fullScreen() {
            this.$refs.welcome.style.position = "fixed";
            this.$refs.welcome.style.left = 0;
            this.$refs.welcome.style.top = 0;
            this.$refs.welcome.style.right = 0;
            this.$refs.welcome.style.bottom = 0;
            this.$refs.welcome.style.height = "100%"
        },
        jumpToMine() {
            this.$router.push({ name: "mine" });
        },
    },
    mounted() {
        this.$nextTick(function () {
            let option = {
                tooltip: {
                    trigger: "item",
                    show: true,
                },
                legend: {
                    top: "50%",
                    left: "right",
                    orient: "vertical", //排列方式垂直
                },
                color: ["#2DB5A1", "#EA430C", "#8F85E8"],
                series: [],
            };
            // 任务概览
            let generalCharts = echarts.init(this.$refs.echartsGeneral); //传递一个dom元素
            //传入配置项
            generalCharts.setOption(option);
            //发送异步请求获取数据
            taskDataApi().then((res) => {
                let data = res.data.data;
                this.workDataDetail = data;
                let series = {
                    name: "bug修复进度",
                    type: "pie",
                    center: ["40%", "50%"], //调整饼图在容器中的位置
                    radius: ["50%", "80%"], //半径
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: "center", //让数据提示在圆环中间
                        formatter: "{d}%",
                        textStyle: {
                            fontSize: "20",
                            fontWeight: "bolder",
                        },
                    },
                    emphasis: {
                        //强调 鼠标移入到饼图上会对该数据进行强调
                        label: {
                            show: true,
                            position: "outer",
                            fontSize: "15",
                            fontWeight: "bold",
                            color: "red",
                        },
                    },
                    labelLine: {
                        show: true,
                    },
                    data,
                };
                generalCharts.setOption({
                    series,
                });
            });

            //阶段学习情况
            let achieveCharts = echarts.init(this.$refs.achieveCharts);
            //期望课程
            let expectCharts = echarts.init(this.$refs.expectCharts);
            //折线图选项
            let achieveChartsOption = {
                legend: {
                    left: "85%",
                    top: "bottom",
                },
                xAxis: {
                    //x轴
                    type: "category",
                    data: [],
                    show: false,
                },
                yAxis: {
                    type: "value",
                    show: false, //是否隐藏坐标轴
                },
                label: {
                    //提示内容
                    show: true,
                    formatter: "{b}:{c}%", //格式化内容
                },
                series: [],
            };
            //期望模块饼图选项
            let expectChartsOption = {
                tooltip: {
                    show: true,
                    trigger: "item", //散点图和饼图的可以使用item触发
                },
                legend: {
                    //表示数据的提示
                    top: "5%", //距离顶部偏移5%
                    left: "80%", //靠左排列的位置
                    top: "bottom", //靠顶部排列的位置
                    orient: "vertical", //排列方向 horizontal
                    itemWidth: 10, //提示框的宽度
                    itemHeight: 10, //提示框的高度
                    textStyle: {
                        //设置字体样式
                        // color:"#fff"//颜色
                    },
                },
                color: ["#D75A3A", "#CE1908", "#55A49F"], //设置环形图颜色
                series: [
                    //系列
                ],
            };
            achieveCharts.setOption(achieveChartsOption);
            //折线图异步请求
            lineDataApi().then((res) => {
                let data = res.data.data;
                // console.log(data);
                let xData = [];
                let sData = data.map((item) => {
                    xData.push(item.name);
                    return item.rate;
                });

                achieveCharts.setOption({
                    xAxis: {
                        data: xData,
                    },
                    series: [
                        {
                            name: "学习进度",
                            data: sData,
                            type: "line",
                            smooth: 1, //是否开启平衡曲线
                        },
                    ],
                });
            });
            expectCharts.setOption(expectChartsOption);
            //底部环形图异步请求
            expectDataApi().then((res) => {
                let data = res.data.data;
                let sData = data.map((item) => {
                    return {
                        value: item.rate,
                        name: item.title,
                    };
                });
                expectCharts.setOption({
                    series: {
                        name: data.desc,
                        type: "pie",
                        radius: ["40%", "70%"], //半径
                        avoidLabelOverlap: true, //重要属性 防止标签重叠
                        label: {
                            //文字数据提示
                            show: true,
                            position: "outer", //可以是inner center outer设置提示位置
                            formatter: "{b}:{d}%", //\n\n很关键 能够让文字显示在牵引线上方
                            // padding: [0, -50]//文字的padding位置
                        },
                        emphasis: {
                            //强调(当鼠标移入的时候显示的强调内容)
                            label: {
                                show: true,
                                fontSize: "10",
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            //牵引线
                            show: true,
                            length: 10, //牵引线长度
                            length2: 10,
                            lineStyle: {
                                //牵引线颜色
                                color: "#808080",
                            },
                        },
                        data: sData,
                    },
                });
            });
            window.onresize = function () {
                generalCharts.resize();
            };
        });
    },
};
</script>
<style scoped>
.container {
    height: 100%;
}

div {
    border-radius: 10px;
}

.date-title {
    height: 30px;
    background: #2aac98;
    color: #fff;
    line-height: 30px;
    font-weight: bolder;
    border-radius: 10px 10px 0 0;
}

.calendar>>>.el-calendar-day {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

.calendar>>>.el-calendar-table thead th {
    padding-top: 0;
    padding-bottom: 0;
}

.calendar>>>.el-calendar__header {
    padding-top: 5px;
    padding-bottom: 5px;
}

.calendar>>>.el-calendar__body {
    padding-top: 0;
    padding-bottom: 0;
}

.welcome {
    background-image: linear-gradient(135deg, #4c67ff, #5635df);
    margin-top: 5px;
    color: #666;
    display: flex;
    height: 90%;
    flex-direction: column;
    justify-content: space-between;
    /* background: #131925; */
}

.top {
    display: flex;
    flex: 7;
    justify-content: space-around;
    margin-bottom: 5px;
    margin: 5px;
}

.bottom--achieve {
    display: flex;
    flex: 3;
}

.bottom--achieve__left {
    flex: 5;
    margin-right: 10px;
}

.bottom--achieve__right {
    flex: 5;
}

.echartsGeneral {
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
}

.achieveCharts {
    height: 100%;
}

.expectCharts {
    height: 100%;
}

.article {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 5px;
}

.aside {
    flex: 7;
    display: flex;
    flex-direction: column;
}

.aside--message {
    flex: 5;
    display: flex;
    justify-content: space-around;
    margin-bottom: 5px;
}

.aside--tarsk {
    display: flex;
    justify-content: space-between;
    flex: 5;
    align-items: center;
}

div {
    flex-shrink: 0.6;
}

.tarsk--general {
    /* width: 100%; */
    height: 100%;
    flex: 5;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
}

.tarsk--general h4 {
    text-align: left;
    padding-left: 5%;
    margin-top: 10px;
}

.tarsk--fact {
    display: flex;
    flex: 5;
    justify-content: space-between;
    flex-direction: column;
}

.tarsk--fact ul {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.aside--message__left {
    flex: 4;
    display: flex;
    flex-direction: column;
    margin-right: 5px;
}

.aside--message__notify {
    display: flex;
    flex: 6;
    display: flex;
    flex-direction: column;
}

.message--left__hello {
    flex: 5;
    margin-bottom: 5px;
}

.message--left__weather {
    flex: 5;
}

.article__user {
    display: flex;
    flex: 4;
    margin-bottom: 5px;
    justify-content: space-around;
    align-items: center;
}

.article__user--avatar {
    flex: 3;
}

.article__user--info {
    flex: 3;
}

.article__user--setting {
    flex: 1;
    height: 100%;
    position: relative;
}

.article__user--setting i {
    position: absolute;
    top: 5px;
    right: 10px;
}

.article__user--avatar>>>.el-avatar--large {
    width: 80px;
    height: 80px;
}

.article__date {
    height: 100%;
    flex: 6;
}

.article__user,
.article__date,
.message--left__hello,
.message--left__weather,
.aside--tarsk,
.aside--message__notify,
.bottom--achieve {
    /* background: #202835; */
    background: #fff;
    /* border: 1px solid #ccc; */
}</style>
